<template>
    <div id="menu">
          <mt-tabbar>
            <mt-tab-item  v-for="(item,index) in nav" :key='index'  id="item.id" :class="{footeractive:isSelect == index}" >
               <div  @click="changfoot(index,item.path)"> <i class="iconfont" :class="item.icon"></i></div>
               {{item.id}}
            </mt-tab-item>
        </mt-tabbar>
    </div>
</template> 

<script>

export default {
    data(){
       return{
            isSelect:this.$store.state.isSelect,
            nav:[
                {id:"首页",icon:'icon-home',path:'/home'},
                {id:"柠檬铺",icon:'icon-doodle',path:'/classify'},
                {id:"门诊",icon:'icon-plus',path:'/lemshop'},
                {id:"理财",icon:'icon-diamond',path:'/Cart'},
                {id:"我的",icon:'icon-user',path:'/my'}
            ]
       }

    },
    methods: {
        changfoot(id,path){
            this.isSelect=id;
            this.$router.push(path);
            this.$store.commit('footIsSelect',id);
        }
    }
}
</script>

<style lang="less">
.iconfont{
    font-size: 1.2rem;
    line-height: 1.4rem;
}
.footeractive{ color:#e3c11c}
</style>